<template>
    <div class="square">
        <el-card class="box-card">
            <el-table :data="tableData" style="width:100%" height="560">
                <el-table-column prop="date" label="医生头像" width="180">
                    <template slot-scope="{row}">
                        <el-avatar shape="square" :size="60" :src="row.imgUrl"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="医生名称" width="180">
                </el-table-column>
                <el-table-column prop="department" label="科室" width="180">
                </el-table-column>
                <el-table-column prop="price" label="处方金额" width="180">
                </el-table-column>
                <el-table-column prop="date" label="操作" width="180">
                    <template>
                        <i class="el-icon-document" @click="handelshow"></i>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20, 25]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                :total="6212">
            </el-pagination>

        </el-card>



        <el-dialog title="处方详情" :visible.sync="dialogVisible" width="80%">
            <el-table :data="drugsData" style="width: 100%" height="400">
                <el-table-column prop="name" label="药品名称" width="180">

                </el-table-column>
                <el-table-column prop="name" label="药品名称" width="180">
                </el-table-column>
                <el-table-column prop="department" label="药品图片" width="180">
                    <template slot-scope="{row}">
                        <el-avatar shape="square" :size="60" :src="row.imgUrl"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="norms" label="药品规格" width="120">
                </el-table-column>
                <el-table-column prop="price" label="药品单价" width="120">
                </el-table-column>
                <el-table-column prop="num" label="药品数量" width="120">
                </el-table-column>
                <el-table-column prop="time" label="有效期" width="120">
                </el-table-column>
                <el-table-column prop="desc" label="用量备注" width="165">
                </el-table-column>
            </el-table>


        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            tableData: [
                {
                    imgUrl: "https://img2.baidu.com/it/u=3261928216,1083459578&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200",
                    name: "张志龙",
                    department: "头部外科",
                    price: "332.2",
                },
                {
                    imgUrl: "https://img2.baidu.com/it/u=3261928216,1083459578&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200",
                    name: "张志龙",
                    department: "头部外科",
                    price: "332.2",
                },
                {
                    imgUrl: "https://img2.baidu.com/it/u=3261928216,1083459578&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200",
                    name: "张志龙",
                    department: "头部外科",
                    price: "332.2",
                },
                {
                    imgUrl: "https://img2.baidu.com/it/u=3261928216,1083459578&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200",
                    name: "张志龙",
                    department: "头部外科",
                    price: "332.2",
                },
                {
                    imgUrl: "https://img2.baidu.com/it/u=3261928216,1083459578&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200",
                    name: "张志龙",
                    department: "头部外科",
                    price: "332.2",
                },
                {
                    imgUrl: "https://img2.baidu.com/it/u=3261928216,1083459578&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200",
                    name: "张志龙",
                    department: "头部外科",
                    price: "332.2",
                },
            ],
            drugsData: [
                {
                    name: "阿莫西林胶囊",
                    imgUrl: "https://img0.baidu.com/it/u=724380443,2659258344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
                    norms: "80/盒",
                    price: "12.61",
                    num: 6,
                    time: "2025-11-04",
                    desc: "1日1次 1次1粒"

                },
                {
                    name: "阿莫西林胶囊",
                    imgUrl: "https://img0.baidu.com/it/u=724380443,2659258344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
                    norms: "80/盒",
                    price: "12.61",
                    num: 6,
                    time: "2025-11-04",
                    desc: "1日1次 1次1粒"

                },
                {
                    name: "阿莫西林胶囊",
                    imgUrl: "https://img0.baidu.com/it/u=724380443,2659258344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
                    norms: "80/盒",
                    price: "12.61",
                    num: 6,
                    time: "2025-11-04",
                    desc: "1日1次 1次1粒"

                },
                {
                    name: "阿莫西林胶囊",
                    imgUrl: "https://img0.baidu.com/it/u=724380443,2659258344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
                    norms: "80/盒",
                    price: "12.61",
                    num: 6,
                    time: "2025-11-04",
                    desc: "1日1次 1次1粒"

                },
            ]
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log('这是当前条' + val)
        },
        handleCurrentChange(val) {
            console.log('这是当前页' + val)
        },
        handelshow() {
            this.dialogVisible = true
        }
    }
}
</script>

<style lang="less" scoped>
.square {
    width: 100%;

    .has-gutter {
        width: 100%;


    }
}

.el-icon-document {
    color: #5cb6ff;
    cursor: pointer;
}

.el-card__body {
    padding: 20px 0;
}

/deep/.el-table {
    th.el-table__cell {
        background: #f2f6fc;
    }
}

/deep/.el-table__header-wrapper {
    .el-table__header {
        width: 100% !important;

    }
}

/deep/.el-table {
    .has-gutter {
        color: #0f0f0f !important;
    }
}

/deep/.el-table__body-wrapper {
    .el-table__body {
        width: 100% !important;
    }
}
</style>